@import url("https://fonts.googleapis.com/css?family=Sanchez");

/*webkit*/
* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/*content*/
*::before,
*::after {
    content: "";
    position: absolute;
}

html {
    font-family: "Sanchez", serif;
}

/*a*/
.container-wrapper {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

html {
    -webkit-transform: background-color 3s ease;
    -o-transform: background-color 3s ease;
    transition: background-color 3s ease;
    transition-delay: 2s ease;
    -webkit-transition-delay: 2s ease;
    -o-transition-delay: 2s ease;
    background-color: #fff7f4;
}

.container {
    width: 450px;
    height: 450px;
    position: relative;
}

.container-night {
    background-color: #e4ecff;
}

.circle-container{
    width: 450px;
    height: 450px;
    clip-path: circle(50% at 50% 50%);
    position: absolute;
    overflow: hidden;
    z-index: 100%;
}

.sky{
    position: absolute;
    width: 100%;
    height: 55%;
    top: 0;
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#feb8b0)
        to(#fef9db) 
    );
    background: -webkit-linear-gradient(#feb8b0,#fef9db);
    background: -o-linear-gradient(#feb8b0,#fef9db);
    background: linear-gradient(#feb8b0,#fef9db);
    z-index: 1;
    overflow: hidden;
}

.sky-night{
    position: absolute;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#6c62bb)
        color-stop(#6c62bb)
        to(#93b1ed) 
    );
    background: -webkit-linear-gradient(#6c62bb,#6c62bb,#93b1ed);
    background: -o-linear-gradient(#6c62bb,#6c62bb,#93b1ed);
    background: linear-gradient(#6c62bb,#6c62bb,#93b1ed);
    opacity: 0;
    -webkit-transform: opacity 3s;
    -o-transform: opacity 3s;
    transform:opacity 3s ;
    transition-delay: 2s ;
    -webkit-transition-delay: 2s ;
    -o-transition-delay: 2s ;
}

.sky-night-fade{
    opacity: 1;
}

@-webkit-keyframes sky-night{
    
}